<template>
  <div class="app-container">
    <!-- 导入导出按钮 -->
    <a href="http://localhost:8202/admin/cmn/dict/exportDict" target="_blank">
      <el-button type="text">导出</el-button>
    </a>

    <el-button type="text" @click="on_off('true')">导入</el-button>

    <!-- 数据 -->
    <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      lazy
      :load="getChildrens"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="名称" width="230" align="left" prop="name">
      </el-table-column>
      <el-table-column label="编码" width="220" prop="dictCode"> </el-table-column>
      <el-table-column label="值" width="230" prop="value" align="left">
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog :visible.sync="popup" title="导入" width="480px">
      

      <el-form label-position="right" label-width="170px">
        <el-form-item label="文件">
          <el-upload
            :multiple="false"
            :on-success="onUploadSuccess"
            :action="'http://localhost:8202/admin/cmn/dict/uploading'"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div>只能上传excel文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import dict from "@/api/dict";

export default {
  data() {
    return {
      list: [], // 表格数据
      popup: false, // 弹框是否弹出
    };
  },
  // 组件
  components: {},
  // 方法
  methods: {
    // 上传成功触发的方法
    onUploadSuccess() {
      this.popup = false;

      this.getDictList(1);
    },
    // 是否打开上传弹框
    on_off(i) {
      this.popup = i;
    },

    // 下载
    exportDict() {
      //调用导出接口
      window.location.href = "http://localhost:8202/admin/cmn/dict/exportDict";
    },

    // 查子列表
    getChildrens(tree, treeNode, resolve) {
      dict.dictList(tree.id).then((response) => {
        resolve(response.data);
      });
    },
    //数据字典列表
    getDictList(id) {
      dict.dictList(id).then((response) => {
        this.list = response.data;

        console.log(this.list, "表格数据");
      });
    },
  },
  //在页面渲染之前执行
  created() {
    this.getDictList(1);
  },
};
</script>

<style scope>
.button_1 {
  width: 20px;
  height: 20px;
}
</style>
